<!--
 * @Author: your name
 * @Date: 2019-12-29 11:00:50
 * @LastEditTime : 2020-01-14 22:49:43
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuehr\src\views\Login.vue
 -->
<template>
    <div class="bodylogin">
        <el-form
                label-width="100px"
                :rules="rules"
                ref="loginForm"
                v-loading="loading"
                element-loading-text="正在登录..."
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
                :model="loginForm"
                class="loginContainer">
            <h3 class="loginTitle">系统登录</h3>
            <el-form-item prop="qddm" label="渠道代码：" >
                <el-input style="width:190px;" size="normal" type="text" v-model="loginForm.qddm" 
                          placeholder="请输入渠道代码"></el-input>
            </el-form-item>
            <el-form-item prop="username" label="用户名：" >
                <el-input style="width:190px;" size="normal" type="text" v-model="loginForm.username" 
                          placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="密码：">
                <el-input style="width:190px;" size="normal" type="password" v-model="loginForm.password" 
                          placeholder="请输入密码" @keydown.enter.native="submitLogin"></el-input>
            </el-form-item>
            
            <!-- <el-checkbox size="normal" class="loginRemember" v-model="checked"></el-checkbox> -->
            <el-button size="normal" type="primary" style="width: 100%;" @click="submitLogin">登录</el-button>
        </el-form>
    </div>
</template>

<script>

    export default {
        name: "Login",
        data() {
            return {
                loading: false,
                loginForm: {
                    username: '',
                    password: '',
                    qddm:''
                },
                checked: true,
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    qddm:[{required: true, message: '请输入渠道代码', trigger: 'blur'}]
                }
            }
        },
        methods: {
            tologin(){
                // /check/login
            this.postKeyValueRequest('/doLogin', this.loginForm).then(resp => {
                        this.loading = false;
                        if (resp) {
                            this.$store.commit('INIT_CURRENTHR', resp.obj);
                            window.sessionStorage.setItem("user", JSON.stringify(resp.obj));
                            let path = this.$route.query.redirect;
                            this.$router.replace((path == '/' || path == undefined) ? '/home' : path);
                        }else{
                            this.loading = false;
                        }
                    })
            },
            submitLogin() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        let data ={
                            userId:this.loginForm.username,
                            passWord:this.loginForm.password,
                            qddm:this.loginForm.qddm,
                        }
                        this.postRequest('/check/login', data).then(resp => {
                            if (resp) {
                                console.log(resp,'2222222222')
                                this.tologin();
                            }else{
                                this.loading = false;
                            }
                        })
                    } else {
                        this.$message.error('请输入所有字段');
                        return false;
                    }
                });
            }
        }
    }
</script>

<style>
    .bodylogin{
        height: 100%;
        width: 100%;
        background:url(~@/assets/banners5.jpg);
        background-repeat: no-repeat;
        background-size: 100% 100%; 
        overflow: hidden;
    }   
    .loginContainer {
        border-radius: 15px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle {
        margin: 15px auto 20px auto;
        text-align: center;
        color: #505458;
    }

    .loginRemember {
        text-align: left;
        margin: 0px 0px 15px 0px;
    }
</style>